<template>
  <div>
    <div class="search-group">
      <div class="search-gropu-item">
        <label>物资名称</label>
        <el-input v-model="listQuery.wuzimc" placeholder="请输入"></el-input>
      </div>
      <div class="search-gropu-item">
        <label>物资区分</label>
        <el-select v-model="listQuery.wuziqfid" placeholder="请选择">
          <el-option v-for="(item, index) in wzqflist" :key="index" :label="item.mingcheng" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-gropu-item">
        <label>物资分类</label>
        <el-select v-model="listQuery.wuzizy" placeholder="请选择">
          <el-option v-for="(item, index) in zhuanyelist" :key="index" :label="item.zhuanyemc"
            :value="item.zhuanyeid"></el-option>
        </el-select>
      </div>
      <div class="search-button">
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetlist">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
    return {
      show: true,
      wzqflist: [],
      zhuanyelist: []
    }
  },
  props: {
    listQuery: {
      type: Object,
      default: {},
      required: true,
    },
    path: {
      type: String,
      default: null,
      require: true,
    },
  },
  async mounted() {
    this.wzqflist = await this.$util.getWzqflist()
    this.zhuanyelist = await this.$util.getWzzy()
  },
  methods: {
    search() {
      this.$parent.search()
    },
    resetlist() {
      this.$parent.resetlist()
    }
  },
}
</script>
<style lang="scss" scoped>
.search-group {
  display: flex;
  flex-flow: row wrap;

  .search-gropu-item {
    padding: 10px 20px;
    width: calc((100% - 20px * 8) / 4);
    display: flex;

    label {
      width: .8rem;
      white-space: nowrap;
      line-height: .32rem;
      margin-right: .1rem;
    }

    .el-select {
      width: 100%;
    }
  }

  .search-gropu-item-time {
    width: 500px !important;
    padding: 10px 20px;
    display: flex;

    label {
      white-space: nowrap;
      line-height: 32px;
      margin-right: 10px;
    }
  }

  .search-button {
    margin-left: auto;
    padding: .10rem .20rem;

    .el-button {
      font-size: .14rem !important;
    }
  }
}
</style>